<template>
  <div class="page-container">
    <div ref="chart" class="container-charts"></div>
  </div>
</template>

<script>
import { TotalAreaCropsProportion } from "../request/api";
export default {
  computed: {
    changeTheme() {
      return this.$store.state.theme;
    },
  },
  watch: {
    //监听计算属性
    changeTheme() {
      //销毁整个图表实例
      this.info.dispose()
      this.init();
      this.getData();
      //页面一加载调用自适应函数
      this.screen();
    },
  },
  mounted() {
    this.init();
    this.getData();
    //自适应
    this.screen();
    window.addEventListener("resize", this.screen);
  },
  destroyed() {
    window.removeEventListener("resize", this.screen);
  },
  methods: {
    async init() {
      //获取节点
      let chart = this.$refs.chart;
      //初始化echart
      let myChart = this.$echart.init(chart);
      this.info = myChart;

      //配置项
      let options = {
        title: {
          text: "种植农作物面积统计",
          left:20,
          top:10
        },
        // legend: {
        //   show: true,
        //   icon:"circle",
        //   // left:"10%",
        //   top: "15%",
        // },
        //提示框组件
        tooltip: {
          show: true,
          
        },
        legend:{
            top:"18%",
            left:"10%"
        },
        grid: {
                    top: '15 %',
                    left: '0%',
                    bottom: '10 %',
                    right: '10 %'
                },
        //数据列
        series: [
          {
            type: "pie",
            radius:80,
            center:["50%","58%"]
            // top:'20%'
          },
        ],
      };
      //给chart设置配置项
      myChart.setOption(options);
    },
    async getData() {
      //调借口
      let result = await TotalAreaCropsProportion();
      // console.log(result);
      let valuelist = result.data.map((item) => {
        return {
          value: item.value,
          name: item.name,
        };
      });
      console.log(valuelist);
      this.setoption(valuelist);
    },
    //设置options
    setoption(valuelist) {
      let options = {
        series: [
          {
            type: "pie",
            data: valuelist,
          },
        ],
      };
      this.info.setOption(options);
    },
    //  自适应
    screen() {
      // 图表自适应
      this.info.resize();
      // 标题字体自适应
      let width = this.$refs.chart.offsetWidth;
      let num = (width / 100) * 5;

      // 重新设置字体样式
      let options = {
        title: {
          textStyle: {
            fontSize: num,
          },
        },
      };
      this.info.setOption(options);
    },
  },
};
</script>

<style lang="" scoped>
</style>
